<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>WebGL - Planar Projection - Setup</title>
    <link type="text/css" href="../../resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
    <div id="info">
        <div class="description">
            Planar Projection - Setup
        </div>
        <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-planar-projection-mapping.html"
            target="_blank">WebGL 平面的和透视的投影映射</a>
    </div>
    <canvas id="canvas"></canvas>
    <div id="uiContainer">
        <div id="ui">
        </div>
    </div>
</body>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<!-- <script src="../resources/webgl-lessons-ui.js"></script>
<script src="../resources/webgl-utils.js"></script>
<script src="../resources/m4.js"></script>
<script src="../resources/primitives.js"></script> -->
<!-- vertex shader -->
<script id="vertex-shader-3d" type="x-shader/x-vertex">
// 顶点着色器
attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_projection;
uniform mat4 u_view;
uniform mat4 u_world;

varying vec2 v_texcoord;

main(){
    gl_position = u_projection * u_view * u_world * a_position;

    //把纹理坐标传给片段着色器
    v_texcoord = a_texcoord;
}
</script>
<!-- fragment shader -->
<script id="fragment-shader-3d" type="x-shader/x-fragment">
// 片段着色器
precision mediump float;

// 从顶点着色器传来的
varying vec2 v_texcoord;

uniform vec4 u_colorMult;
uniform sampler2D u_texture;

void main(){
    gl_FragColor = texture2D(u_texture, v_texcoord) * u_colorMult;
}
</script>
<script>
    'use strict'

    function main() {
        // Get A WebGL context
        /** @type {HTMLCanvasElement} */
        const canvas = document.querySelector('#canvas');
        const gl = canvas.getContext('webgl');
        if (!gl) {
            return;
        }

        const textureProgramInfo = webglUtils.createProgrameInfo(gl, ['vertex-shader-3d', 'fragment-shader-3d']);
        
    }

</script>

</html>